<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
			<%
			final String message = (String) request.getAttribute ("error");
			%>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>SAP Feed</title>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
		<script src="http://malsup.github.com/jquery.blockUI.js"></script>
		<script src="jquery.tooltip.min.js"></script>
		<script src="jquery.scrollTo-min.js"></script>
		<script>
		 var dataSet = [];
		 var descMap = [];
		 var backCSS = { backgroundColor : "#9D9FA4" };
		 var loginCSS = { border: '4px solid #330066', backgroundColor: '#FFFFFF', opacity: 1, '-moz-border-radius-topleft': '10px',
				    '-moz-border-radius-bottomleft': '10px',
				    '-webkit-border-top-left-radius': '10px',
				    '-moz-border-radius-bottomright': '10px',
				    '-webkit-border-top-right-radius': '10px',
				     '-webkit-border-bottom-right-radius': '10px',
				    '-webkit-border-bottom-left-radius': '10px',
				    height :'150px', width: '300px'};
		$(document).ready(function() {
			function hideAll() {
				$("#login").hide();
				$("#signup").hide();
				$(".mainPage").hide();
				$("#userid").hide();
			}
			
			$("#header").html("<img src=\"sap-logo.png\">");
			hideAll();	
			var error = <%= message%>
			if(error == true || error == null ) {
				$.blockUI({ message: $('#login'),
					overlayCSS : backCSS,
					
					css: loginCSS }); 
			} else {
				$.unblockUI({ 
					onUnblock: function() {
						$(".mainPage").show();
						refreshList();
					} 
				});
			}
			//$("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
			//$("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');
			$("#mainPage a").click(function(){
				$("mainPage").scrollTo($(this).attr("href"),0);
			});
			//bind events to tabs
			$("#login a").click(function (){
				$.unblockUI({ 
					onUnblock: function() {
						$.blockUI({ message: $('#signup'),
							overlayCSS :backCSS,
							css: loginCSS}); 
					} 
				});
			});
			
			$("#signup a").click(function (){
				$.unblockUI({ 
					onUnblock: function() {
						$.blockUI({
							overlayCSS : backCSS,
							message: $('#login'),
							
							css: loginCSS }); 
					} 
				});
			});
			$("#signup input[type=\"submit\"]").click( function() {
				var p1, p2, userName;
				userName = $("#username").val();
				p1 = $("#p1").val();
				p2 = $("#p2").val();
				if( p1 != p2) {
					alert("Passwords do not match!");
					$("#p1").val('');
					$("#p2").val('');
				} else {
					$.post("Signup", { username: userName, password: p1 }, function(response) {
						$.unblockUI({ 
							onUnblock: function() {
								//debugger;
								$.blockUI({
									message: $('#userid'),
									overlayCSS : backCSS,
									css: loginCSS,
									onBlock: function() {
										$("#message").html(response);
									}
								}); 
							} 
						});
					},'json');
				}
			});
			
			$("#logout").click(function(){
				$.post("Logout", function (response) {
					hideAll();
					alert(response);
					$.blockUI({
						message: $('#login'),
						overlayCSS : backCSS,
						css: loginCSS 
					});
				});
			});
			$("#userid input[type=\"button\"]").click(function(){
				$.unblockUI({
					onUnblock: function() {
						$.blockUI({
							message: $('#login'),
							overlayCSS : backCSS,
							css: loginCSS 
						});
					}
				});
			});
			$("#dslist").on("click","tr", function() {
					
					var val = getDataSetID($(this).html());

					if( $(this).hasClass('userSet')) {
						if(confirm("Unsubscribe from " + val + " ?")) {
							$(this).addClass("dataSet");//.removeClass("userSet");
							$(this).removeClass('userSet');
							
							//Unsubscribe from the data set
							
							$.post("Unsubscribe", { dataSet: val});
						}	
					} else if ($(this).hasClass('dataSet')) {
						if(confirm("Subscribe to " + val + " ?")) {
							$(this).addClass("userSet");//removeClass("dataSet");
							$(this).removeClass('dataSet');
							
							//Subscribe to the data set							
							$.post("Subscribe", { dataSet: val});
						}	
					}
					
			});
			
			var animationFlag;
			
			$("#dslist").on("mouseenter","tr",function(event) {
				event.stopPropagation();
				var data =  $(this).html();
    	        var desc = descMap[getDataSetID(data)];
				/**/
				if( $(this).hasClass('userSet')) {
					$(this).animate( { 'background-color': "#339933" },200);
				} else if ($(this).hasClass('dataSet')) {
					$(this).animate( { 'background-color': "#CC0000" },200);
				}						
			});
			$("#dslist").on("mouseleave","tr",function(event) {
				event.stopPropagation();
				if( $(this).hasClass('userSet')) {
					$(this).animate( { 'background-color': "#52C954" },200, function() {
						
					});
				} else if ($(this).hasClass('dataSet')) {
					$(this).animate( { 'background-color': "#CA5854" },200);
				}
			});
			$("#adddataset").click( function() {
				var dataSetName = prompt("Enter name of dataset");
				if(dataSetName != null ) {
					var dataSetDescription = prompt("Enter the description of " + dataSetName + ":");
					if (dataSetDescription != null) {
						$.post("AddData", { dataSet: dataSetName, dataSetDesc: dataSetDescription}, function() {
							refreshPubList();
						});
					}
				}
			});
			
			$("#refresh").click(function (){
				refreshList();
			});
			
			function refreshList() {
				$.post('GetData', function(response) {
				    //Update the lists and display them
				  
				   var userSet = [];
				   
				   dataSet = response[0];
				    userSet = response[1];
			//	    alert('Reached');
				    var dataListLength = dataSet.length,
				    	i, content = "<tr><td class=\"logo\">ID</td><td class=\"logo\">Name</td><td class=\"logo\">Description</td></tr>";
				   
				    for(i=0; i<dataListLength; i++) {
				    	var current = dataSet[i];
				    	
				    	if($.inArray(current.id,userSet) >= 0) {
				    		content +="<tr class=\"userSet\"><td>" + current.id + "</td><td class=\"tdchild\">" + current.name + "</td><td>" + current.description + "</td></tr>";
				    	} else {
				    		content +="<tr class=\"dataSet\"><td>" + current.id + "</td><td class=\"tdchild\">" + current.name + "</td><td>" + current.description + "</td></tr>";
				    	}
				    	descMap[i] = current.description;
				    	
				    }
				    /*$('#dslist *').each( function (index) {
				    	$(this).qtip({
					    	content :  descMap[index]
					    });
				    });*/
				    
				    $("#dslist").html(content);
				    
				}, 'json');
			}
			
			function refreshPubList() {
				$.post('GetPubData', function(response) {
					var pubList = [];
					pubList = response;
					if(pubList != null) {
						var i, pubListLength = pubList.length, content='';
						
						for(i=0;i<pubListLength;i++) {
							content += "<li>" + pubList[i] + "</li>";
						}
						
						$("#publist").html(content);
					}			
				}, 'json');
			}
			
			function getDataSetID( data ) {
				var firstIndex, lastIndex;
				var subString;
				firstIndex = data.indexOf('>');
				firstIndex++;
					
				lastIndex = data.indexOf('</');
				
				subString = data.substring(firstIndex,lastIndex);
				
				return subString;
			}
			
			$("#tabs").bind( 'tabsselect', function ( event, ui ) {
				//identify the tab
				switch ( ui.index ) {
					//subscriber ( show all available data sets)
					case 0:
					//	alert('On tab 0');
						refreshList();
						break;
					
					//publisher ( show all the data sets the admin is publishing)
					case 1:
					//	display the data sets being published
						refreshPubList();
						break;
						
					//random facts ( stub for now )	
					case 2:
					//	alert('On tab 2');
					/*	$.post('Test', function(response) {
						    // Do something with the request
						    alert(response[1]);
						}, 'json'); */
						break;
				}
			});
			//css for tabs
			/*
			.ui-tabs-vertical { width: 55em; }
	.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
	.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
	.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
	.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
	.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
			*/
		});
		</script>
		
		<style type="text/css">
		
	/* Vertical Tabs
	----------------------------------*/
	#header { background-color:white;background-image:url('sap-logo.png');box-shadow: 10px 10px;background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; }
	#login label { font-family:Calibri, Verdana, sans-serif; font-weight: bold;}
	
	.logo { font-family:Calibri, Verdana, sans-serif; border: 1px solid #696;
	padding: 2px 2px;
	color: white;
	text-align: center;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: #666 0px 2px 3px;
	-moz-box-shadow: #666 0px 2px 3px;
	box-shadow: #666 0px 2px 3px;
	background: #4564C9;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4564C9), to(#829AE6));
	background: -webkit-linear-gradient(#4564C9, #829AE6);
	background: -moz-linear-gradient(#4564C9, #829AE6);
	background: -ms-linear-gradient(#4564C9, #829AE6);
	background: -o-linear-gradient(#4564C9, #829AE6);
	background: linear-gradient(#4564C9, #829AE6);
	-pie-background: linear-gradient(#4564C9, #829AE6);}
	#dslist { border-style: none; border-spacing: 0px 2px; }
	#dslist tr td:FIRST-CHILD { -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;border-color: #A8A8A8; border-width: medium 0px medium 0px;
    padding: 5px; }
    #login {-moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-right-radius: 5px;
     -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;border-color: #A8A8A8;}
    #dslist tr .tdchild { border-width: medium 0px medium 0px; }
    #dslist tr td:LAST-CHILD { -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;border-color: #A8A8A8; border-width: medium 0px medium 0px;
    padding: 5px; width : 500px}
	#dslist .userSet { color: white;background-color: #52C954; }
	#dslist .dataSet { color: white;background-color: #CA5854; }
	#dslist .columnHead { color: black;}
	#mainPage { width:100%;
    height:100%;
    position:absolute;
    top:0;left:0;
    background-color:#ccc;
    overflow:hidden;};
	#tabs {width:500%;
        height:100%;
        background-color:#eee;};
    .panel { width:20%;
        height:100%;
        float:left;
        background-color:#ddd;};
	body { font-family:Calibri, Verdana, sans-serif }
	a { float: right;}
		</style>
</head>
<body>
	<div id="mainPage">
			<div id="header">
				
			</div>
			<ul>
					<li><a href="#tabs-1"><span>Subscribe to</span></a></li>
					<li><a href="#tabs-2"><span>Publishers</span></a></li>
					<li><a href="#tabs-3"><span>Statistics</span></a></li>
			</ul>
			<div id="tabs">
				
								
				<div id="tabs-1" class="panel">
					<p> List of available datasets</p>
					<!-- Get DataSet List from the database -->

					<input type="submit" value="Refresh List" id="refresh">
					<table id="dslist"></table>
					
				</div>
				
				<div id="tabs-2" class="panel">
					<p> List of datasets that you are publishing :</p>
					<br />
					<p class="logo"> Dataset ID</p>
					<ul id="publist"> </ul>
					
					<input type="button" id="adddataset" value="Add New Data Set">
				</div>
				
				<div id="tabs-3" class="panel">
					<p> Random statistics</p>
				</div>
			</div>
			
			<input type="button" value="Logout" id="logout">
			<form id="login" action="Login" method="POST">
				<br />
				<label> UserID </label>
				<input type="text" name="username">
				<br />
				<br />
				<label> Password </label>
				<input type="password" name="password">
				<br />
				<input type="submit" value="submit">
				<br />
				<a >Click here to signup!</a>
			</form>
				
			<div id="signup">
				<label> Name </label>
				<input id="username" type="text" name="username">
				<br />
				<br />
				<label> Password </label>
				<input id="p1" type="password" name="password">
				<br />
				<br />
				<label>Confirm Password </label>
				<input id="p2" type="password" name="password">
				<br />
				<input type="submit" value="submit">
				
				<a >Login Page</a>
			</div>
			
			<div id="userid">
				<div id="message"></div>
				<br />
				<input type="button" value="Ok">
			</div>
		</div>
</body>
</html>